<template>
  <div class="login">
    <header>
      <img src="@/assets/image/logo.png" alt="logo" />
    </header>
    <section>
      <md-field>
        <md-input-item
          ref="input11"
          placeholder="账号"
          type="phone"
          v-model="phone"
          @change="onPhoneChange"
          @blur="onPhoneBlur"
        >
          <i class="iconfont iconzhanghao" slot="left"></i>
          <p v-if="phoneError" class="error" slot="error">
            {{ err.phoneErrMsg }}
          </p>
        </md-input-item>

        <md-input-item
          type="password"
          placeholder="密码"
          v-model="password"
          @change="onPwdChange"
          @blur="onPwdBlur"
        >
          <i class="iconfont iconmima" slot="left"></i>
          <p v-if="pwdError" class="error" slot="error">
            {{ err.pwdErrMsg }}
          </p>
        </md-input-item>

        <md-input-item
          ref="input11"
          placeholder="请输入图形验证码"
          type="type"
          v-model="imgCode"
          @change="onCodeChange"
          @blur="onCodeBlur"
        >
          <i class="iconfont iconyanzhengma" slot="left"></i>
          <img
            :src="imgSrc"
            class="imgCode"
            @click="imgClick"
            slot="right"
            alt=""
          />
          <p v-if="codeError" class="error" slot="error">
            {{ err.codeErrMsg }}
          </p>
        </md-input-item>
      </md-field>
      <div class="select">
        <md-agree
          v-model="agreeConf.checked"
          :size="agreeConf.size"
          style="font-size: 10px;color: #999999;"
          @change="onAgreeChange()"
        >
          记住密码
        </md-agree>
      </div>
      <div>
        <md-button class="loginBtn" @click="loginBtn" type="primary" round
          >登录</md-button
        >
      </div>
    </section>
  </div>
</template>

<script>
import "@/assets/iconfont/iconfont.css";
import { InputItem, Field, Button, Icon, Toast, Agree } from "mand-mobile";
export default {
  name: "login",
  components: {
    [InputItem.name]: InputItem,
    [Field.name]: Field,
    [Icon.name]: Icon,
    [Button.name]: Button,
    [Agree.name]: Agree
  },
  data() {
    return {
      phone: "", //手机号输入框内容
      password: "", //密码输入框内容
      imgCode: "", //图形验证码输入框内容
      imgSrc: "", //图形验证码src
      phoneError: false,
      pwdError: false,
      codeError: false,
      err: {
        //提示语句
        phoneErrMsg: "请输入正确的手机号！",
        pwdErrMsg: "请输入正确的密码！",
        codeErrMsg: "请输入正确的图形验证码！"
      },
      verify: { //用于登录判断状态
        phone: "",
        password: "",
        imgCode: ""
      },
      agreeConf: {
        //
        checked: true,
        size: "lg"
      }
    };
  },
  methods: {
    onPhoneChange(name, value) {
      if (/^1[34578][0-9]{9}$/.test(value)) {
        this.phoneError = false;
        this.verify.phone = true;
      } else {
        this.phoneError = true;
        this.verify.phone = false;
      }
    },
    onPhoneBlur() {
      if (/^1[34578][0-9]{9}$/.test(this.phone)) {
        this.phoneError = false;
        this.verify.phone = true;
      } else {
        this.phoneError = true;
        this.verify.phone = false;
      }
    },
    onPwdChange(name, value) {
      if (/^.{6,}$/.test(value)) {
        this.pwdError = false;
        this.verify.password = true;
      } else {
        this.pwdError = true;
        this.verify.password = false;
      }
    },
    onPwdBlur() {
      if (/^.{6,}$/.test(this.password)) {
        this.pwdError = false;
        this.verify.password = true;
      } else {
        this.pwdError = true;
        this.verify.password = false;
      }
    },
    onCodeChange(name, value) {
      if (/^[a-zA-Z\d]{4}$/.test(value)) {
        this.codeError = false;
        this.verify.imgCode = true;
      } else {
        this.codeError = true;
        this.verify.imgCode = false;
      }
    },
    onCodeBlur() {
      if (/^[a-zA-Z\d]{4}$/.test(this.imgCode)) {
        this.codeError = false;
        this.verify.imgCode = true;
      } else {
        this.codeError = true;
        this.verify.imgCode = false;
      }
    },
    onAgreeChange() {
      if (!this.agreeConf.checked) {
        let phone = localStorage.getItem("bPhone");
        let password = localStorage.getItem("bPassworrd");
        if (phone !== null || password !== null) {
          localStorage.removeItem("bPhone");
          localStorage.removeItem("bPassworrd");
        }
      }
    },
    getCode() {
      this.$ajax.get(this.$api.getPicCode).then(res => {
        this.imgSrc = res.code;
      });
    },
    imgClick() {
      this.getCode();
    },
    loginBtn() {
      if (this.verify.phone && this.verify.password && this.verify.imgCode) {
        let data = {
          mobile: this.phone,
          password: this.password,
          code: this.imgCode
        };
        this.$ajax
          .post(this.$api.login, data)
          .then(res => {
            if (this.agreeConf.checked) {
              localStorage.setItem("bPhone", this.$crypto.setAES(this.phone));
              localStorage.setItem(
                "bPassworrd",
                this.$crypto.setAES(this.password)
              );
            }
            sessionStorage.setItem("btoken", res.token);
            Toast.succeed(res.msg, 2000);
            this.$router.push("/home");
          })
          .catch(err => {
            Toast.failed(err, 2000);
          });
      } else {
        Toast.failed("请输入完整信息！");
      }
    }
  },
  created: function() {
    this.getCode();
    let phone = localStorage.getItem("bPhone");
    let password = localStorage.getItem("bPassworrd");
    if (phone !== null && password !== null) {
      this.phone = this.$crypto.getAES(phone);
      this.password = this.$crypto.getAES(password);
    }
  }
};
</script>
<style scoped lang="stylus">
header{
  text-align center;
  background: -webkit-linear-gradient(#3c90d7, #3395d4, #317EB9); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(#3c90d7, #3395d4, #317EB9); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(#3c90d7, #3395d4, #317EB9); /* Firefox 3.6 - 15 */
  background: linear-gradient(#3c90d7, #3395d4, #317EB9); /* 标准的语法（必须放在最后） */
  img{
    width:162px;
    padding :131px;
  }
}
section{
  padding: 126px 115px 0;
  .md-field{
    padding: 0;
    margin: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
  }
 .md-input-item{
   margin: 0 auto 28px auto;
 }
  .select{
    padding-left 22px;
    padding-bottom 28px;
  }
  .loginBtn{
    box-shadow:0 5px 10px 0 rgba(44,121,185,0.64);
  }
  .imgCode{
    height: 60px;
    width: 152px;
  }
}
</style>
